<!DOCTYPE html>
<!-- 设置 layout.html 布局 -->
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="layout">

<div th:fragment="content">
    <div class="bg">
        <div class="form">
            <!-- 开头的标签，可以选择注册 -->
            <div class="tabs">
                <!-- 利用 Tab 键可以聚焦，顺序是当前 DOM 结构顺序决定 -->
                <div class="tab login tab-selected" tabindex="0">密码登录</div>
                <div class="tab signup" tabindex="0"><a href="/sign">注册</a></div>
            </div>
            <div class="form-login">
                <div class="hint" style="display:none">
                    <span class="hint-icon"></span>
                    <span class="txt">用户名或密码错误</span>
                </div>
                <form th:action="@{/login}" method="post">
                    <div class="username">
                        <!-- 如果输入失去焦点采取的措施 -->
                        <input
                                type="text"
                                class="username-input"
                                placeholder="用户名"
                                onblur="onblur"
                                name="userName"
                        >
                    </div>
                    <div class="pwd">
                        <input
                                type="password"
                                class="pwd-input"
                                placeholder="密码"
                                name="password"
                        >
                        <!-- 暂时不写找回密码，设置当前连接不可用 -->
                        <a
                                href="#"
                                class="pwd-retrieve"
                        >找回密码</a>
                    </div>
                    <p class="wrong-tip" th:text="${message}" th:if="${not #strings.isEmpty(message)}"></p>
                    <button
                            type="submit"
                            class="submit"
                    >登录
                    </button>
                    <div class="auto-login">
                        <input type="checkbox" name="" id="auto-login-checkbox">
                        <label for="auto-login-checkbox">下次自动登录</label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</html>